<template>
  <div class="box-container">
    <el-carousel
      trigger="click"
      :height="state.isMobile ? '300px' : '60vh'"
      :autoplay="false"
      arrow="never"  >
      <el-carousel-item>
        <div class="top-bg">
          <div class="info-box">
            <div class="left">
              <div class="line1">认证/检测/咨询/培训行业</div>
              <div class="line2">数字化升级浪潮来袭</div>
              <div class="line3">大势所趋 / 政策红利 / 万亿市场 / 待君加盟</div>
            </div>
            <div class="right">
              <div class="btn" @click="onCooperate">
                <span>立 即 加 盟 </span>
                <img src="../assets/images/cooperate/ICON_ARROW@2x.png" />
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="information">
      <div class="top">
        <div class="first">
          <div class="title">行业分析</div>
          <div class="content">JOIN IN COOPERATION</div>
        </div>
        <div class="second">
          <el-row :gutter="10" style="background: #fff">
            <el-col :xs="8" :sm="8" :md="8" :lg="10" :xl="10">
              <div class="img"></div>
            </el-col>
            <el-col :xs="16" :sm="16" :md="16" :lg="14" :xl="14">
              <div class="desc">
                <div class="title1">企业方</div>
                <div class="line"></div>
                <div class="title2">行业痛点</div>
                <div class="detail">
                  服务商在获取直接客户时面临着高成本的问题，而通过转介绍获得的项目往往利润较低且控制力弱。同时，寻找特定地区或专业领域的合作机构或师资也极具挑战，即便通过同行转介绍，也会增加额外成本。
                </div>
                <div class="title2">解决方案</div>
                <div class="detail">
                  通过“华商直聊”小程序与APP，企业能够便捷地免费发布自身需求，吸引相关服务商主动联系。同时，平台提供了详尽的服务商信息，包括从业年限、专业资质及客户案例等，供企业进行全面比较。企业还可通过平台的在线聊天功能，高效获取性价比最优的服务提供商。
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="third">
          <el-row :gutter="10" style="background: #fff">
            <el-col :xs="16" :sm="16" :md="16" :lg="14" :xl="14">
              <div class="desc">
                <div class="title1">服务商</div>
                <div class="line"></div>
                <div class="title2">行业痛点</div>
                <div class="detail">
                  对客户的服务商获取直客的成本高昂，而通过转介绍的项目利润薄，掌控度低；
				  寻找某地或某专项业务的机构或师资非常困难，即便同行转介绍，成本会增加。
                </div>
                <div class="title2">解决方案</div>
                <div class="detail">
                  利用“华商直聊”APP，服务商可以直接浏览到各个城市企业发布的需求信息，从而有效提高直接客户的获取率。
				  此外，服务商还可通过平台的“切换身份”功能，以企业方的视角轻松寻找到所需的合作机构或专业师资。
				  这一解决方案不仅降低了成本，还提高了市场响应速度和业务掌控力。
                </div>
              </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="10" :xl="10">
              <div class="img"></div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="tool-box">
        <div class="box1 box" @click="scrollToTop">
          <div class="img"></div>
          <div class="desc">返回顶部</div>
        </div>

        <div class="box3 box" @click="onCooperate">
          <div class="img"></div>
          <div class="desc">微信咨询</div>
          <img class="hover-image" src="../assets/images/cooperate/dialog-wx.png" />
        </div>
      </div>

      <div class="footer">
        <div class="line1">Copyright@{{ showYear }} CNBOSS 版权所有-武汉华商知了信息技术有限公司</div>
        <!-- <div class="line2">备案 / 许可证编号: 沪ICP备14024387号-1 沪公网安备 31011402003939号</div> -->
        <div class="line2">
          <a href="https://beian.miit.gov.cn/" style="color: white;" target="_blank">
            备案 / 许可证编号: 鄂ICP备2023024382号-1
          </a>
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42010302002575" style="color: white;" target="_blank">
            鄂公网安备42010302002575号
          </a>
        </div>
      </div>
    </div>

    <CooperateDialog ref="CooperateDialogRef"></CooperateDialog>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref, reactive, watch } from 'vue'
import { useWindowSize } from '@vueuse/core'
const emit = defineEmits(['scrollTop'])
let showYear = new Date().getFullYear();
  console.info("----showYear----",showYear)
// 引入组件
const CooperateDialog = defineAsyncComponent(() => import('../components/CooperateDialog.vue'))
const CooperateDialogRef = ref()
const { width } = useWindowSize()
const state = reactive({
  isMobile: false
})

watch(
  () => width.value,
  (val) => {
    if (val < 1024) {
      state.isMobile = true
    } else {
      state.isMobile = false
    }
  },
  { immediate: true }
)

// 合作加盟
const onCooperate = () => {
  CooperateDialogRef.value.openDialog()
}

// 返回顶部
const scrollToTop = () => {
  emit('scrollTop')
}
</script>

<style lang="scss" scoped>
.box-container {
  overflow-x: hidden;
  position: relative;
  height: 100%;
  width: 100%;

  .top-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../assets/images/cooperate/pic_top_bg@2x.png') no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;

    .info-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 12rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5);

      .left {
        padding: 1rem;
        width: 50rem;
        .line1 {
          font-weight: bold;
          font-family: Microsoft YaHei-Bold;
          font-size: 2.5rem;
          color: #fff;
          text-align: left;
        }
        .line2 {
          font-weight: bold;
          font-family: Microsoft YaHei-Bold;
          font-size: 2.5rem;
          color: #fff;
          text-align: left;
        }
        .line3 {
          font-size: 1.5rem;
          color: #ffffffca;
          letter-spacing: 0.5rem;
          text-align: left;
        }
      }
      .right {
        width: 40rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
          cursor: pointer;
          width: 18rem;
          height: 5rem;
          background-color: #b72320;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 1.8rem;
          border-radius: 2px;

          img {
            display: block;
            width: 2rem;
            margin-left: 1rem;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .top-bg {
      height: 300px;
      background: url('../assets/images/cooperate/mb_pic_top_bg@2x.png') no-repeat;
      background-position: center;
      background-size: cover;
      .info-box {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: auto;
        display: block;
        // display: flex;
        // flex-direction: row;
        // justify-content: center;
        background-color: rgba(0, 0, 0, 0.5);

        .left {
          padding: 1rem;
          // width: 100%;
          width: 70%;
          float: left;
          .line1 {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            text-align: left;
          }
          .line2 {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            text-align: left;
          }
          .line3 {
            font-size: 0.6rem;
            color: #ffffffca;
            letter-spacing: 0.1rem;
            text-align: left;
          }
        }
        .right {
          // width: 100%;
          width: 30%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 1rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .btn {
            cursor: pointer;
            width: 8rem;
            height: 3rem;
            background-color: #b72320;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 0.9rem;
            border-radius: 2px;

            img {
              display: block;
              width: 1.2rem;
              margin-left: 0.5rem;
            }
          }
        }
      }
    }
  }

  .information {
    position: relative;
    width: 100%;
    // background: url('../assets/images/home/information2.png') no-repeat;
    background-color: #f2f3f300;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        font-size: 2.2rem;
        font-weight: 600;
        margin-bottom: 1rem;
      }
      .content {
        font-size: 1.5rem;
        color: #fafafad1;
      }
      .first {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 8rem;
        // background-color: #fff;
        box-shadow: 0px 8px 10px 5px rgb(240 247 217 / 20%);

        .title {
          font-family: 'DreamHanSerifCNW27';
          color: #363635;
          font-size: 2.5rem;
          margin-top: 3.5rem;
          z-index: 2;
        }
        .content {
          font-family: 'DreamHanSerifCNW27' !important;
          color: #eef0ef;
          font-size: 3rem;
          margin-top: -3.5rem;
          font-family: fangsong;
        }
      }
      .second {
        width: 100%;
        padding: 4rem 0;
        .img {
          background: url('../assets/images/cooperate/Rectangle89@2x.png') no-repeat;
          background-position: center;
          background-size: contain;
          width: 100%;
          height: 25rem;
          transform: scale(1.2);
        }
        .desc {
          padding: 2rem 6rem 1rem 0;
          .title1 {
            font-size: 2.2rem;
            font-weight: 600;
            color: #333;
          }
          .line {
            display: block;
            width: 2rem;
            height: 2px;
            background-color: #333;
            margin: 1rem 0;
          }
          .title2 {
            font-size: 1.5rem;
            font-weight: 600;
            padding-top: 0.5rem;
            color: #333;
          }
          .detail {
            padding-top: 0.5rem;
            font-size: 1.5rem;
            color: #333333cc;
          }
        }
      }
      .third {
        width: 100%;
        margin: 3rem 0 12rem 0;
        .img {
          background: url('../assets/images/cooperate/Rectangle92@2x.png') no-repeat;
          background-position: center;
          background-size: contain;
          width: 100%;
          height: 25rem;
          transform: scale(1.2);
        }
        .desc {
          padding: 2rem 0 1rem 6rem;
          .title1 {
            font-size: 2.2rem;
            font-weight: 600;
            color: #333;
          }
          .line {
            display: block;
            width: 2rem;
            height: 2px;
            background-color: #333;
            margin: 1rem 0;
          }
          .title2 {
            padding-top: 0.5rem;
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
          }
          .detail {
            padding-top: 0.5rem;
            font-size: 1.5rem;
            color: #333333cc;
          }
        }
      }
    }

    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 5rem;
      padding: 4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #363635;
      justify-content: center;
      color: #fafafad1;
      text-align: center;
      .line1 {
        margin-bottom: 0.5rem;
      }
    }
  }

  .tool-box {
    z-index: 999;
    position: fixed;
    right: 0;
    top: 65%;
    width: 4rem;
    height: 10rem;
    background-color: #b72320;

    .hover-image {
      width: 10rem;
      height: 10rem;
      display: none;
    }
    .box {
      width: 4rem;
      height: 5rem;
      padding: 0.3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // border-top: 1px solid #cccccc91;
      cursor: pointer;
      .img {
        width: 2.5rem;
        height: 2.5rem;
        margin: 5px;
      }
      .desc {
        color: #fff;
        font-size: 0.7rem;
        padding-bottom: 0.5rem;
      }
    }
    .box1 {
      .img {
        background: url('../assets/images/cooperate/ICON_back@2x.png') no-repeat;
        background-position: center;
        background-size: contain;
      }
      .desc {
        border-bottom: 1px solid #cccccc91;
      }
    }
    .box2 {
      .img {
        background: "";
        background-position: center;
        background-size: contain;
      }
      .desc {
        border-bottom: 1px solid #cccccc91;
      }

      &:hover {
        .hover-image {
          display: block;
          position: absolute;
          right: 4rem;
          bottom: 0;
        }
      }
    }
    .box3 {
      .img {
        background: url('../assets/images/cooperate/ICON_WECHAT@2x.png') no-repeat;
        background-position: center;
        background-size: contain;
      }
      &:hover {
        .hover-image {
          display: block;
          position: absolute;
          right: 4rem;
          bottom: 0;
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .tool-box {
      position: initial;
      display: flex;
      width: 100%;
      margin-bottom: 8rem;
      height: 7rem;
      flex-direction: row;
      align-content: center;
      justify-content: center;
      align-items: center;
      .box {
        width: 8rem;
        height: 5rem;

        .img {
          width: 3rem;
          height: 3rem;
        }
        .desc {
          font-size: 1rem;
          border: none;
        }
      }
      .box1,
      .box2,
      .box3 {
        border: none;
      }
      .box1,
      .box2 {
        border-right: 1px solid #fff;
      }
    }
    .information {
      .top {
        .first {
          height: 5rem;
          background-color: inherit;
          .title {
            font-size: 1.5rem;
            margin-top: 2rem;
          }
          .content {
            font-size: 1.2rem;
            margin-top: -2.2rem;
          }
        }
        .second {
          padding: 2rem 0 0 0;
          .img {
            height: 20rem;
            transform: scale(1);
            background-size: cover;
          }
          .desc {
            padding: 1rem 1rem 1rem 0;
            .title1 {
              font-size: 1.2rem;
            }
            .line {
              width: 1.6rem;
              margin: 0.5rem 0;
            }
            .title2 {
              font-size: 1rem;
            }
            .detail {
              font-size: 0.8rem;
            }
          }
        }
        .third {
          margin-bottom: 1rem;
          .img {
            height: 20rem;
            transform: scale(1);
            background-size: cover;
          }
          .desc {
            padding: 1rem 0 1rem 1rem;
            .title1 {
              font-size: 1.2rem;
            }
            .line {
              width: 1.6rem;
              margin: 0.5rem 0;
            }
            .title2 {
              font-size: 1rem;
            }
            .detail {
              font-size: 0.8rem;
            }
          }
        }
      }
      .footer {
        font-size: 0.8rem;
        height: 8rem;
        padding: 1rem 1rem 3rem 1rem;
      }
    }
  }
}
.line2>a{
  text-decoration: none;
}
.line2>a:hover{
  text-decoration: underline;
}
</style>
